<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Remote ToolTips - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/container/assets/container.css'/>

<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js'></script>
<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/container/container-min.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/tooltips/tooltips.js'></script>
<script type="text/javascript">
(function() {
// short hands	
var $B = YAHOO.CMS.Bubble,
    $L = YAHOO.lang,
    $E = YAHOO.util.Event,
    $C = YAHOO.util.Connect;

  // customizing the tooltips for ajax requesting process
  YAHOO.CMS.widget.Tips.onCompile = function ( el, o ) {
  	var id = el.getAttribute('id');
  	if ($L.isString(id) && (id !== '')) {
  		// the anchor have an id defined, we must send the ajax request
		if ($L.isObject(this.handle)) {
  			$C.abort(this.handle);
  		}
  		var callback = {
			success: function(o) {
				// process the response here...
				YAHOO.CMS.widget.Tips.handleOverlay.setBody ( o.responseText );
			},
			failure: function(o) {
			}
		};
		var uri = '../../PHP/tooltips.php?id='+id;
		this.handle = $C.asyncRequest('GET', uri, callback);
  		return 'Loading, please wait...';
  	}
  	return false;
  };
})();
</script>
</head>
<body id="cms-body">

  <div id="doc">

	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

	<h1>Examples of Using the Bubbling Technique for AJAX ToolTips</h1>
	
	<p>Benefit from the bubbling technique, include the corresponding behavior for Tooltips and all the links in your page will have a nice dynamic tooltip attach it:</p>
	  <a href="#" id="tt1" title="My text was set using the 'title' attribute inside the Anchor tab...">Hover over me to see a Tooltip without URL!</a>
	<p>
	  <a href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip with the URL inside!</a>
	</p>
	<p>
	Image inside an Anchor: <a href="/eng/class/examples/" id="tt3" rel="actionBookmark" title="Bookmark - Examples"><img src="./images/sitemap.gif" alt="Bookmark"></a></p>
		
  </div>



</body>
</html>